<template>
  <PageContainer>
    <view>
      <Header title="申请撮合记录详情" />
      <view class="bg-white pa-16">
        <template v-for="(v, i) in dataList" :key="v.id">
          <TimeLineItem
            :state="getTimeLineItemState(v.status)"
            :is-end="v.type === MatchingNodeTypeEnum.publisher"
          >
            <template>
              <view class="fz-14 default-color font-bold mb-8">
                <text>{{ v.typeName }}</text>
              </view>
              <template v-if="v.applyTypeFlowUserVo">
                <view class="fz-12 default-color mb-8 disFlxAC">
                  <text>{{ v.applyTypeFlowUserVo.userName }}</text>
                  <template v-if="v.applyTypeFlowUserVo.positionName">
                    <text class="mx-6">丨</text>
                    <text>{{ v.applyTypeFlowUserVo.positionName }}</text>
                  </template>
                  <template v-if="v.applyTypeFlowUserVo.orgName">
                    <text class="mx-6">丨</text>
                    <text>{{ v.applyTypeFlowUserVo.orgName }}</text>
                  </template>
                </view>
                <view
                  v-if="getShowItem(v.applyTypeFlowUserVo)"
                  class="br-4 pt-8 px-8 mb-8"
                  style="background-color: #f2f3f5"
                >
                  <view class="pb-8" v-if="v.applyTypeFlowUserVo.boContact">
                    <InfoRow
                      label="联系方式："
                      label-color="#969799"
                      margin="0"
                      :value="v.applyTypeFlowUserVo.boContact"
                    />
                  </view>
                  <view v-if="v.applyTypeFlowUserVo.evaluationTag" class="pb-8">
                    <InfoRow label="审核标签：" margin="0" label-color="#969799">
                      <view class="disFlxAC flex-wrap" style="gap: 16rpx">
                        <template v-for="(tag, i) in v.applyTypeFlowUserVo.evaluationTag" :key="i">
                          <CustomTag
                            :text="tag"
                            font-size="20rpx"
                            background-color="#2878FF"
                            color="#fff"
                            padding="4rpx 12rpx"
                          />
                        </template>
                      </view>
                    </InfoRow>
                  </view>
                  <view v-if="v.applyTypeFlowUserVo.approvalRemark" class="pb-8">
                    <InfoRow
                      label="撮合备注："
                      margin="0"
                      label-color="#969799"
                      :value="v.applyTypeFlowUserVo.approvalRemark"
                    />
                  </view>
                  <view v-if="v.applyTypeFlowUserVo.boIntention" class="pb-8">
                    <InfoRow
                      label="申请原因："
                      margin="0"
                      label-color="#969799"
                      :value="v.applyTypeFlowUserVo.boIntention"
                    />
                  </view>
                  <view v-if="v.applyTypeFlowUserVo.incentiveOpen" class="pb-8">
                    <InfoRow
                      color="#EA5E0E"
                      margin="0"
                      label="撮合激励："
                      :value="
                        getIncentiveDetails({
                          estimatedScale: v.applyTypeFlowUserVo.estimatedScale,
                          incentiveOpen: v.applyTypeFlowUserVo.incentiveOpen,
                          incentiveType: v.applyTypeFlowUserVo.incentiveType,
                          showIncentiveDetails: v.applyTypeFlowUserVo.incentiveDetails,
                          showCommissionRate: v.applyTypeFlowUserVo.incentiveCommissionRate!,
                        })
                      "
                    />
                  </view>
                </view>
                <view class="fz-12" style="color: #969799">
                  <text>{{ v.applyTypeFlowUserVo.updateTime }}</text>
                </view>
              </template>
              <view
                v-else-if="v.type !== MatchingNodeTypeEnum.publisher"
                class="fz-12"
                style="color: #969799"
              >
                <text>等待撮合</text>
              </view>
            </template>
          </TimeLineItem>
        </template>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* applicationMatchingRecordDetails 申请撮合记录详情 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TimeLineItem from '../components/TimeLineItem.vue';
  import InfoRow from '../../components/InfoRow.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import { MatchingNodeTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { computed, ref } from 'vue';
  import { onLoad } from '@/router';
  import { intentionApplyTypeDetails, userApplyTypeFlowRecord } from '@/api/businessOpportunities';
  import type { IIntentionApplyTypeDetailsResult } from '@/api/businessOpportunities/type';
  import { isArray, isNumber, isString } from 'lodash-es';
  import { getIncentiveDetails } from '../../components/utils';
  import { PublicBooleanEnum } from '@/enums/publicModuleEnum';

  const dataList = ref<IIntentionApplyTypeDetailsResult[]>([]);
  onLoad<'applicationMatchingRecordDetails'>(async (op) => {
    const res = op.isAudit
      ? await userApplyTypeFlowRecord(op.id)
      : await intentionApplyTypeDetails(op.id);
    dataList.value = res.map((v) => {
      if (v.applyTypeFlowUserVo) {
        const evaluationTag = getEvaluationTag(v.applyTypeFlowUserVo.evaluationTag as string);
        if (isNumber(v.applyTypeFlowUserVo.applicantContactStatus)) {
          evaluationTag.unshift(
            v.applyTypeFlowUserVo.applicantContactStatus === PublicBooleanEnum.YES
              ? '已联系'
              : '未联系',
          );
        }
        isArray(evaluationTag) &&
          evaluationTag.length &&
          (v.applyTypeFlowUserVo.evaluationTag = evaluationTag);
      }
      return v;
    });
  });

  const getShowItem = (item: IIntentionApplyTypeDetailsResult['applyTypeFlowUserVo']) => {
    if (!item) return;
    return (
      item.boContact ||
      item.evaluationTag ||
      item.approvalRemark ||
      item.boIntention ||
      isNumber(item.incentiveOpen)
    );
  };

  const getTimeLineItemState = (status: IIntentionApplyTypeDetailsResult['status']) => {
    switch (status) {
      case 1:
        return 'success';
      case 2:
        return 'error';
      default:
        return 'waiting';
    }
  };

  function getEvaluationTag(evaluationTag: string) {
    if (isString(evaluationTag)) {
      return evaluationTag.split(',');
    }
    return [];
  }
</script>
